<template>
  <el-menu
    class="left-menu"
    :collapse="isCollapse"
    router
    unique-opened
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <div class="title">
      <i class="fa fa-audio-description fa-lg" aria-hidden="true"></i>
      <span style="margin-left: 3px;">阿蛋科技</span>
    </div>

    <!--转为字符串-->
    <el-submenu :index="index+''"
                v-for="(item, index) in routes" :key="index"
                v-if="!item.hidden"
    >
      <template slot="title">
        <i :class="item.iconCls" style="color: #ffd04b;margin-right: 5px"></i>
        <span>{{item.name}}</span>
      </template>
      <el-menu-item :index="children.path"
                    v-for="(children, indexj) in item.children"
                    :key="indexj"
      >
        {{children.name}}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "Menu",
  props:['isCollapse'],
  data(){
    return {
      // sidebar:{
      //   isCollapse: false,
      // },
      // fixedHeader: true

    }
  },
  computed: {
    routes() {
      return this.$store.state.routes;
    }
  },
  methods:{

  }
}
</script>

<style lang="scss" scoped>
  .left-menu{
    height: 100vh;
    margin: 0;
  }

  .left-menu .title {
    height: 30px;
    position: relative;
    padding: 10px 20px 0 12px;
    font-size: 25px;
    font-family: 华文楷体;
    color: #ffd04b
  }


</style>
